<template>
  <div class="login">
    <el-card class="cards">
      <h3>
        vue3 后台管理系统
       <el-icon ><UserFilled /></el-icon>
      </h3>

      <el-form :model="state.From" :rules="state.rules" ref="login" status-icon label-width="20px"
        class="demo-ruleForm">
        <el-form-item prop="username">

          <el-input v-model="state.From.username" :prefix-icon="Avatar" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input :prefix-icon="Unlock" type="password" autocomplete="off" v-model="state.From.password">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button color="#f4c9df" style="color: white" type="primary" @click="goLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script  setup>
import { useStore } from "vuex";
import { Unlock, Avatar } from "@element-plus/icons-vue";
import { reactive, toRefs, computed, watch, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {getLogin} from "@/http/one/api"


let router = useRouter();
let store = useStore();
const state = reactive({
  From: {
    username: "admin",
    password: "123456",
  },
  rules: {
    username: [
      {
        required: true,
        message: "请输入用户名",
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        min: 5,
        max: 16,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
});

const login = ref(); 
let goLogin = () => {
  login.value.validate((valid) => {
    if (valid) {
      getLogin(state.From).then((res) => {
        console.log('登录成功',res);
        if (res.data.meta.status == 200) {
        //   store.dispatch("userInfos", res.data);
        //   store.dispatch("getLists");
          setTimeout(function () {
            router.push("/about");
          }, 500);
        }
      });
    } else {
      return false;
    }
  });
};

</script>

<style scoped lang='scss'>
* {
  box-sizing: border-box;
}

.login {
    background-color: pink;
    height: 100vh;
}
 .cards {
    width: 500px;
    padding: 20px;
    height: 342px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 70%);

    .el-form-item {
      padding: 5px 0px;
      text-align: right;

      .el-button {
        width: 100%;
        display: block;
      }
    }
  }
</style>
